/*
*   @Author: 1296
*   @Date: 2025-03-11
*   @Description: 页脚
*/

<template>
  <footer class="app-footer">
    <div class="footer-content">
      <p>{{ $t('allRightsReserved') }}</p>
      <nav class="footer-nav">
        <a href="/demandAnalysis">{{ $t('demandAnalysis') }}</a>
        <a href="/interfaceDoc">{{ $t('interfaceDoc') }}</a>
        <a href="/systemDesign">{{ $t('systemDesign') }}</a>
        <a href="/instruction">{{ $t('instruction') }}</a>
      </nav>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'AppFooter',
};
</script>

<style scoped>
.app-footer {
  background-color: #e4e2e2;
  padding: 3px 0;
  font-size: clamp(10px, 0.8vw, 30px);
  color: #333;
  text-align: center;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-nav {
  margin-top: 5px;
}

.footer-nav a {
  margin: 0 10px;
  color: #007bff;
  text-decoration: none;
}

.footer-nav a:hover {
  text-decoration: underline;
}
</style>
